<extend name="Base/common"/>

<block name="body">
<!-- lkl新增大图预览 s-->

<link rel="stylesheet" type="text/css" href="__CSS__/css/default-skin.css?v=2.1.5"/>
<link rel="stylesheet" type="text/css" href="__CSS__/css/photoswipe.css?v=2.1.5"/>
<script type="text/javascript" src="__JS__/js/photoswipe.min.js?v=2.1.5"></script>
<script type="text/javascript" src="__JS__/js/photoswipe-ui-default.min.js?v=2.1.5"></script>
<!-- lkl新增大图预览 e-->
    <body style="background:#faf8f8;">

        <!--我的相册-->

        <div id="photos">

            <header><a href="javascript:;" class="back" onclick="history.go(-1)"><img src="__IMG__/images/back_03.png"/></a>相册<eq name="id" value="$uid"><a href="javascript:;" class="sure" type='1'>选择</a></eq></header>
			
                <div class="photoList">
				<!-- lkl新增大图预览 s-->
<div class="my-simple-gallery" style="display:none;">

<volist name='all' id='vol'>
	<figure style="height:160px;" class="fig">
	<a href="__ROOT__{$vol.img|getimg}" data-size="__ROOT__{$vol.img|getimgsize}">
		<img class="img-class-top" src="__ROOT__{$vol.img|getimg}" /></a>
	</figure>
</volist>
</div><!-- lkl新增大图预览 e-->
                    <ul>

                            <li style="padding: 0px">

                                <div >
									<volist name='all' id='vol'>
                                        <span id="Photo1" style="float:left;margin-right:10px;"  >
                                            <img class="img-class-top myimg" src="__ROOT__{$vol.img|getslimg}" />
												
                                            <div class="box"><img src="__IMG__/images/shanch_03.png" class="shanc"/></div>
                                        </span>
                                        <input type="checkbox" style="display: none;" class="ee" name="{$vol.id}[]" value="{$vol.id}">
									</volist>
                                     <form action="{:U('imgs')}" id="mac" class="form-horizontal" method="post" enctype="multipart/form-data" style="text-align: center;width:160px;height:160px;float:left;margin-top:12px;">

                                        <empty name="imgid">

                                        <img id="pic" src="__IMG__/images/ssss.jpg" class="class-img" width="160" height="160">

                                        <else/>

                                        <img id="pic" src="__ROOT__{$imgid|getimg=###}" class="class-img" width="160" height="160">

                                        </empty>

                                        <input id="upload"name="img" accept="image/*" type="file" style="display: none" />

                                    </form>

                                </div>

                            </li>

                    </ul>

<style type="text/css">
.progress {display:none; top:50px; position:relative;border: 1px solid #ddd; border-radius: 3px;  margin: 30px 0px 0px 20px;width: 94%;height:50px;}
.bar { background-color: #B4F5B4; width:0%; height:50px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
#status{display:none;margin: 0px 0px 0px 20px;width: 94%;text-align:center;}
</style>
<div class="progress">
					<div class="bar"></div >
					<div class="percent">0%</div >
				</div>
				
				<div id="status">上传成功</div>
					
	<script src="__JS__/js/jquery.form.js" type="text/javascript"></script>
	<script type="text/javascript">

		//lkl  重写表单提交S

	var bar = $('.bar');
	var percent = $('.percent');
	
	$('#mac').ajaxForm({
			beforeSend: function() {
			$('.progress').show();
			var percentVal = '0%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		uploadProgress: function(event, position, total,percentComplete){
			var percentVal = percentComplete + '%';
			bar.width(percentVal)
			percent.html(percentVal);
		},
		success: function(data) {
			var percentVal = '100%';
			bar.width(percentVal)
			percent.html(percentVal);
			layer.alert(data,function(){
					location.reload()
				})
			
		},
		error:function(err){
			alert("表单提交异常！"+err.msg);
		},
	});
	

	</script>
					

                    <eq name="id" value="$uid">



                    <input type="submit" class="shanchu" id="btn" value="删除" style="display:none;" />



                    </eq>



           



            <!-- 123 -->



            <script type="text/javascript">


            $('.shanchu').on('click',function(){
                var str = new Array();
                $("input[type=checkbox]").each(function(){
                    if(this.checked){
                        str += $(this).val()+',';
                    }
                });

               str = str.substring(0,str.length-1);
			   
               layer.open({
                    content: '您确定要删除吗？',
					btn: ['确定', '取消'],
					yes: function(index){
                      $.ajax({
                            url: "{:U('ajaxDel')}",
                            type: 'POST',
                            dataType: 'json',
                            data: {ids:str,},
                            success:function(data){
							alert('删除成功');
                            //layer.msg('删除成功', {
                                  //time: 20000, //20s后自动关闭
                               // });
                            },
							error:function(){
								alert('删除成功');
							}
                        })
						location.href=location.href;
                     //layer.close(index);
                    }
                  });
            });



            $('.myimg').click(function(){
				var show = $('#btn').attr('style');
                var src  = $(this).attr("src");
				var atr = $('.sure').attr('type');
				if(atr == 2){
					var sure = $('header .sure').html();
					if(sure =="选择" || sure === null){alert('ccc');
					   layer.open({
						  type: 1,
						  area: ['100%'],
						   shadeClose: true, //点击遮罩关闭
						   content: "<img width='100% class='class-img' src='"+src+"'>"
						   });
						   $('.layui-layer-title').remove();
					}
				}else{
					var index = $(this).parent().index();
					tindex = index/2;
					
					var height = $('.my-simple-gallery').find('figure').eq(tindex).find('img').height();
					
					$('.my-simple-gallery').find('figure').eq(tindex).click();
				
				}
            })
			
            $('.sure').on('click',function(){
                     var src  = $(this).attr("src");
                     var sure = $('header .sure').html();
                     if(sure =="选择"){
                        $("#btn").show();
                     }else{
                        $("#btn").hide();
                     }
            });

					//lkl修改
                    $("#pic").click(function() {

                        $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                        $("#upload").on("change", function() {

                            //$('#upload').html('正在上传');
                            var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                            if (objUrl) {
                                $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                            }
                            //var url = $('#mac').attr('action');
                            //var fd = new FormData($("#mac")[0]);
							$("#mac").submit();
							
                            //$.ajax({
                                //url: url,
                                //type: "POST",
                                //data: fd,
                                //processData: false, 
                                //contentType: false, 
                                //success: function(data) {
                                   // var index = layer.alert(data.info, function() {
                                       // location.reload()
                                    //});
                                //}
                           // });

                        });
                    });



              



                //建立一個可存取到該file的url



                function getObjectURL(file) {



                    var url = null;



                    if (window.createObjectURL != undefined) { // basic



                        url = window.createObjectURL(file);



                    } else if (window.URL != undefined) { // mozilla(firefox)



                        url = window.URL.createObjectURL(file);



                    } else if (window.webkitURL != undefined) { // webkit or chrome



                        url = window.webkitURL.createObjectURL(file);



                    }



                    return url;



                }



            </script>



            <eq name="id" value="$uid">



           



<!--            <form action="{:U('addd')}" id="mac" class="form-img" method="post" enctype="multipart/form-data">



            <input type="submit" class="ajax-post submit-class" target-form="form-img" name="buto" id="btn" value="上传" />



            </form>-->



            </eq>



            <style>



                #pic {



                    width: 160px;



                    /*border-radius: 50%;*/



                    cursor: pointer;



                    height: 160px;



                    border: 1px solid;



                }







                #upload {



                    border: none;



                }



            </style>



            <!-- 123 -->







        </div>



        </div>
<!-- lkl新增大图预览 s-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>

</div>
<!-- lkl新增大图预览 e-->

        <script type="text/javascript">



                    $('.sure').on('click',function(){
					var atr = $(this).attr('type');
					if(atr == 1){
						$(this).attr('type',2);
					
					 }else{
						$(this).attr('type',1);
						
					 }

                     var src  = $(this).attr("src");



                     var sure = $('header .sure').html();



                     if(sure =="选择"){



                        $(".class-img").hide();



                        $(".submit-class").hide();



                     }else{



                         $(".class-img").show();



                        $(".submit-class").show();



                     }



            });



                     



        </script>
<!-- lkl新增大图预览 s-->
<script>
var initPhotoSwipeFromDOM = function(gallerySelector) {

	// parse slide data (url, title, size ...) from DOM elements 
	// (children of gallerySelector)
	var parseThumbnailElements = function(el) {
	    var thumbElements = el.childNodes,
	        numNodes = thumbElements.length,
	        items = [],
	        figureEl,
	        childElements,
	        linkEl,
	        size,
	        item;

	    for(var i = 0; i < numNodes; i++) {


	        figureEl = thumbElements[i]; // <figure> element

	        // include only element nodes 
	        if(figureEl.nodeType !== 1) {
				continue;
	        }

			linkEl = figureEl.children[0]; // <a> element
			
	        size = linkEl.getAttribute('data-size').split('x');;
	        // create slide object
	        item = {
				src: linkEl.getAttribute('href'),
				w: parseInt(size[0], 10),
				h: parseInt(size[1], 10)
	        };

	        

	        if(figureEl.children.length > 1) {
	        	// <figcaption> content
	          	item.title = figureEl.children[1].innerHTML; 
	        }
 
	        if(linkEl.children.length > 0) {
	        	// <img> thumbnail element, retrieving thumbnail url
				item.msrc = linkEl.children[0].getAttribute('src');
	        } 
	       
			item.el = figureEl; // save link to element for getThumbBoundsFn
	        items.push(item);
	    }

	    return items;
	};

	// find nearest parent element
	var closest = function closest(el, fn) {
	    return el && ( fn(el) ? el : closest(el.parentNode, fn) );
	};

	// triggers when user clicks on thumbnail
	var onThumbnailsClick = function(e) {
	    e = e || window.event;
	    e.preventDefault ? e.preventDefault() : e.returnValue = false;

	    var eTarget = e.target || e.srcElement;

	    var clickedListItem = closest(eTarget, function(el) {
	        return el.tagName === 'FIGURE';
	    });

	    if(!clickedListItem) {
	        return;
	    }


	    // find index of clicked item
	    var clickedGallery = clickedListItem.parentNode,
	    	childNodes = clickedListItem.parentNode.childNodes,
	        numChildNodes = childNodes.length,
	        nodeIndex = 0,
	        index;

	    for (var i = 0; i < numChildNodes; i++) {
	        if(childNodes[i].nodeType !== 1) { 
	            continue; 
	        }

	        if(childNodes[i] === clickedListItem) {
	            index = nodeIndex;
	            break;
	        }
	        nodeIndex++;
	    }



	    if(index >= 0) {
	        openPhotoSwipe( index, clickedGallery );
	    }
	    return false;
	};

	// parse picture index and gallery index from URL (#&pid=1&gid=2)
	var photoswipeParseHash = function() {
		var hash = window.location.hash.substring(1),
	    params = {};

	    if(hash.length < 5) {
	        return params;
	    }

	    var vars = hash.split('&');
	    for (var i = 0; i < vars.length; i++) {
	        if(!vars[i]) {
	            continue;
	        }
	        var pair = vars[i].split('=');  
	        if(pair.length < 2) {
	            continue;
	        }           
	        params[pair[0]] = pair[1];
	    }

	    if(params.gid) {
	    	params.gid = parseInt(params.gid, 10);
	    }

	    if(!params.hasOwnProperty('pid')) {
	        return params;
	    }
	    params.pid = parseInt(params.pid, 10);
	    return params;
	};

	var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
	    var pswpElement = document.querySelectorAll('.pswp')[0],
	        gallery,
	        options,
	        items;

		items = parseThumbnailElements(galleryElement);

	    // define options (if needed)
	    options = {
	        index: index,

			// define gallery index (for URL)
	        galleryUID: galleryElement.getAttribute('data-pswp-uid'),

	        getThumbBoundsFn: function(index) {
	            // See Options -> getThumbBoundsFn section of docs for more info
	            var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
	                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
	                rect = thumbnail.getBoundingClientRect(); 

	            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
	        },

	        // history & focus options are disabled on CodePen
           	// remove these lines in real life: 
		   historyEnabled: false,
		   focus: false	

	    };

	    if(disableAnimation) {
	        options.showAnimationDuration = 0;
	    }

	    // Pass data to PhotoSwipe and initialize it
	    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
	    gallery.init();
	};

	// loop through all gallery elements and bind events
	var galleryElements = document.querySelectorAll( gallerySelector );

	for(var i = 0, l = galleryElements.length; i < l; i++) {
		galleryElements[i].setAttribute('data-pswp-uid', i+1);
		galleryElements[i].onclick = onThumbnailsClick;
	}

	// Parse URL and open gallery if it contains #&pid=3&gid=1
	var hashData = photoswipeParseHash();
	if(hashData.pid > 0 && hashData.gid > 0) {
		openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
	}
};

// execute above function
initPhotoSwipeFromDOM('.my-simple-gallery');
</script>
<!-- lkl新增大图预览 e-->
    </body>



</block>